import React,{useEffect,useState} from 'react';
import { PageHeader, Button, Descriptions } from 'antd';
import axios from 'axios'
import moment from 'moment'
const Newspreview = (props) => {
  const [FormData, setFormData] = useState(null)
  const auditList = ["未审核", "审核中", "已通过", "未通过"]
  const publishList = ["未发布","待发布","已上线","已下线"]
  useEffect(() => {
    axios.get(`/news/${props.match.params.id}?_expand=category&_expand=role`).then(res => {
      setFormData(res.data)
    })
    // console.log('路由参数====',props.match.params.id)
  },[props.match.params.id])
  return (
    <div>
      {
        FormData && <div>
          <PageHeader
            ghost={false}
            onBack={() => window.history.back()}
            title={FormData.title}
            subTitle={FormData.category.title}
          >
            <Descriptions size="small" column={3}>
              <Descriptions.Item label="创建者">{FormData.author}</Descriptions.Item>
              <Descriptions.Item label="创建时间">{moment(FormData.createTime).format("YYYY/MM/DD HH:mm:ss")} </Descriptions.Item>
              <Descriptions.Item label="发布时间">{FormData.publishTime? moment(FormData.createTime).format("YYYY/MM/DD HH:mm:ss"):"---"} </Descriptions.Item>
              <Descriptions.Item label="区域">{FormData.region}</Descriptions.Item>
              <Descriptions.Item label="审核状态">
                <span style={{ color: 'red' }}>{auditList[FormData.auditState]}</span>
              </Descriptions.Item>
              <Descriptions.Item label="发布状态状态">
                <span  style={{ "color": "red" }}>{publishList[FormData.publishState]}</span>
              </Descriptions.Item>
              <Descriptions.Item label="访问数量">{FormData.view}</Descriptions.Item>
              <Descriptions.Item label="点赞数量">{FormData.star}</Descriptions.Item>
              <Descriptions.Item label="评论数量">{0}</Descriptions.Item>
            </Descriptions>
          </PageHeader>
          <div dangerouslySetInnerHTML={{ __html: FormData.content }} style={{
             padding: "50px 24px"
           }}></div>
        </div>
      }
    </div>
  );
}

export default Newspreview;
